<template>
  <!-- 
    问题: 两个没有关系的子组件 如何通信?
    组件通信: eventBus 

    假设两个没关系但需要组件通信的两个子组件分别是A B
    需求是让B传一个值到A  A用这个值进行一系列操作 
    这时候需要一个空白的vue对象EventBus  这个对象只负责监听和触发事件

    B传出数据用EventBus.$emit('事件名',函数体) 来主动触发事件
    A组件需要接收数据 用eventBus.$on('事件名',函数体) 来监听事件
    这两个事件都在空白的vue对象中统一管理

    -->
  <div>

    <MyProduct
      v-for="(obj,ind) in list"
      :title="obj.proname"
      :price= obj.proprice
      :info = obj.info
      :index = ind
      :key="obj.id"
      @changePrice=fn
    >
    </MyProduct>

    <MyList :arr="list"></MyList>
  </div>
</template>

<script>

import MyProduct from './components/MyProduct_sub.vue'
import MyList from './components/MyList.vue'

export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: '超级好吃的棒棒糖',
          proprice: 26.8,
          info: '开业大酬宾, 全场8折'
        },
        {
          id: 2,
          proname: '超级好吃的巧克力',
          proprice: 18.8,
          info: '开业大酬宾, 全场8折'
        },
        {
          id: 3,
          proname: '超级好吃的棉花糖',
          proprice: 30.9,
          info: '开业大酬宾, 全场8折'
        }
      ]
    }
  },
  // 注册组件
  components: {
    MyProduct,
    MyList
  },

  methods: {
    fn(index, price) {
      console.log(index, price);
      this.list[index].proprice -= price
    }
  }
}
</script>

<style>
</style>